<template>
  <a-carousel arrows dots-class="slick-dots slick-thumb">
    <template #customPaging="props">
      <a>
        <img :src="getImgUrl(props.i)" />
      </a>
    </template>
    <div v-for="item in covers.length" :key="item">
      <img
        class="w-full object-cover"
        style="height: calc(50vh - 80px)"
        :src="getImgUrl(item - 1)"
      />
    </div>
  </a-carousel>
</template>

  <script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    covers: {
      type: Array,
      default: [],
    },
  },
  setup(props) {
    const getImgUrl = (i: number) => {
      return props.covers[i];
    };
    return {
      getImgUrl,
    };
  },
});
</script>
  <style scoped>
/* For demo */
.ant-carousel :deep(.slick-dots) {
  position: relative;
  height: auto;
}
.ant-carousel :deep(.slick-slide img) {
  border: 5px solid #fff;
  display: block;
  margin: auto;
  /* max-width: 80%; */
}
.ant-carousel :deep(.slick-arrow) {
  display: none !important;
}
.ant-carousel :deep(.slick-thumb) {
  bottom: 4px;
}
.ant-carousel :deep(.slick-thumb li) {
  width: 60px;
  height: 45px;
}
.ant-carousel :deep(.slick-thumb li img) {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
  display: block;
}
.ant-carousel :deep .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}
</style>
  